<style lang="less" scoped>
.mygrid {
  min-height: 24em;
}
.button-group {
  padding: 0.5em 1.5em;
}
.show-content {
  li {
    list-style: none;
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
    .left {
      width: 35%;
      img {
        width: 100%;
      }   
    }
    .right {
      padding-left: 0.5em;
      .title {
        font-size: 1.1em;
      }
      .descp {
        padding-left: 0.5em;
        min-height: 7.5em;
        font-size: 0.85em;
      }
      .price {
        padding-left: 0.5em;
        color: #ff3333;
        font-size: 0.95em;
        .price1 {
          font-size: 1.5em;
        }
      }
    }
  }
}
</style>
<template>
    <div>
        <x-header class="header" :left-options="{backText: ''}">企业卡</x-header>
        <div class="content">
            <swiper :list="swiperData" auto></swiper>
            <div class="bar"></div>
            <div class="show-content ub">
              
              
            <ul>
              <li v-for="(x,i) in infos" class="ub" @click="onOrderClick(x)">
                <div class="left">
                  <img :src="x.ad" /><br/>
                </div>
                <div class="right uf-1">
                  <div class="title">【{{x.title}}】</div>
                  <div class="descp" v-html="x.descp"></div>
                  <div class="price">RMB: <span class="price1">{{x.price1}}</span>.<span class="">{{x.price2}}</span></div>
                </div>
              </li>
            </ul>
              
            </div>
        </div>
    </div>
</template>
<script>
import { XHeader, Swiper, Grid, GridItem, Panel, XButton } from "vux";

export default {
  data() {
    return {
      swiperData: [
        {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }, {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }
      ],
      infos: [
        {
          ad:"static/image/ad1.png",
          title: "98元无限量流量王",
          descp: "省内流量不限量，国内流量4GB、省内流量达到20GB限速3MB， 达到100GB后关闭上网功能、国内通话1000分钟。",
          price1: "0",
          price2: "00",
          type:1,
          url:'http://m.10010.com/mobilegoodsdetail/101701187266.html'
        },
        {
          ad:"static/image/ad2.png",
          title: "398元冰激凌",
          descp: "流量不限量，语音不限量，月费限时五折。",
          price1: "1000",
          price2: "00",
          type:2,
          url:'http://m.10010.com/mobilegoodsdetail/101701197492.html'
        },
        {
          ad:"static/image/ad3.png",
          title: "88元融合套餐",
          descp: "融合产品，组合新装，组合产品品牌，两个资费一起选， 选择包年周期",
          price1: "700",
          price2: "00",
          type:3,
          url:'http://m.10010.com/mobilegoodsdetail/101703168989.html'
        }
      ]
    };
  },
  methods: {
    onOrderClick(item){
      // console.log(item.type)
      // this.$router.push({name:'PreOrder',params:{type:item.type}});
      window.location.href=item.url
    },
    done(str) {
      this.$vux.toast.show({
        text: str,
        type: "success"
      });
    }
  },
  components: {
    XHeader,
    Swiper,
    Grid,
    GridItem,
    Panel,
    XButton
  }
};
</script>